<template>
  <!-- vue过渡动画 -->
  <div class="box">
    <Layout>
      <div id="demo">
        <button v-on:click="handleFocus">Toggle</button>
        <input ref="inputDom" class="inputClass" />
      </div>
    </Layout>
  </div>
</template>
<script>
import Layout from '@/layout'
export default {
  components: { Layout },
  data() {
    return {
      show: false,
    }
  },
  mounted() {},
  methods: {
    handleFocus() {
      // console.log(this.$refs.inputDom)
    },
  },
}
</script>
<style lang="scss">
.inputClass {
  transition: width 1s;
}
.active {
  // width: 220px;
}

// 进入 / 离开 触发
// .fade-enter-active,
// .fade-leave-active {
//   transition: width 0.5s;
// }
// .fade-enter {
//   width: 200px;
// }
// .fade-leave-to {
//   // width: ;
// }
</style>
